<template>
    <div style="position: relative;height: 50%;margin-bottom: 15px;">
      <span class="recognition" style="position: absolute;top: 18px;left: 15px;z-index: 999;"></span>
      <div id="echart3" class="echarts-style">
      </div>
    </div>
</template>

<script>
  export default {
    name: 'homeAgeechart',
    props:['ageCharts'],
    watch:{
      ageCharts: {
      	handler(newVal, oldName) {
      		 let xList = []
      		 xList = newVal.map(item => {
      		   return item.name
      		 })
      		 this.option.series[0].data = newVal
      		 this.option.legend.data = xList
      		 this.myChart3 && this.myChart3.setOption(this.option);
       },
      	//immediate:true代表如果在 wacth 里声明了obj之后，就会立即先去执行里面的handler方法，
      	immediate: true,
      	deep: true // 开启深度监听，默认是false
      }
    },
    data() {
      return{
         myChart3: null,
         option:{
           title: [{
             text: `每月测量状态段占比：`,
             left: 30,
             textStyle: {
               fontWeight:400,
               lineHeight: 34,
               color: "#333333",
               fontSize: 18,
             },
           }, {
             text: "单位：%",
             right: 20,
             textStyle: {
               fontWeight:400,
               lineHeight: 34,
               color: "#333333",
               fontSize: 18,
             }
           }],
           tooltip: {
             trigger: 'item',
             formatter: '年龄：{b}<br/> 占比：{d}%'         // '{b} : {c} ({d}%)'
           },
           legend: {
             orient: 'vertical',
             right: 0,
             bottom: 0,
             data: []
           },
           series: [{
             type: 'pie',
             radius: '65%',
             center: ['50%', '50%'],
             selectedMode: 'single',
             label: {
               position: 'inside',
               // formatter: function(data) {
               //   return `${data.percent.toFixed(1)}%`
               // }
             },
             data: [],
             emphasis: {
               itemStyle: {
                 shadowBlur: 10,
                 shadowOffsetX: 0,
                 shadowColor: 'rgba(0, 0, 0, 0.5)'
               }
             }
           }]
         }
      }
    },

    mounted() {
      this.initAgeEcharts()
      window.addEventListener("resize",()=>{
         this.myChart3.resize()
      })
    },
    methods: {
    initAgeEcharts() {
      var chartDom = document.getElementById('echart3');
      this.myChart3 = this.$echarts.init(chartDom);
      this.myChart3.setOption(this.option);
    }}
  }
</script>
<style lang="scss">
  .echarts-style {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border: 1px solid #E3E3E5;
    padding: 6px;
  }

  .recognition {
    display: inline-block;
    width: 6px;
    height: 18px;
    background: #78AEF9;
    border-radius: 2px;
    margin-right: 13px;
  }

</style>
